//1.实现验证码点击切换效果
//首先获取需要的内容
var codeReg = document.getElementById("code-reg");
codeTab();
codeReg.onclick = codeTab;
//封装函数实现验证码的切换
//定义一个全局变量获取到数据中的text
var msg;
function codeTab(){
    var xhr = XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(Microsoft.XMLHTTP);
    xhr.open("GET","http://route.showapi.com/26-4?showapi_appid=34271&showapi_sign=43c8a20e560e4936a97e16d49fc3fdbb",true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status==200){
            var data = JSON.parse(xhr.responseText);
            codeReg.src = data.showapi_res_body.img_path;
            msg = data.showapi_res_body.text;
        }
    }
}
//2.实现表单验证
;(function($){
    $.validator.addMethod("phone",function(value,element){
        var reg = /^1{1}[0-9]{10}$/;
        return this.optional(element)||value.match(reg);
    },"亲，请输入您的手机号");
    $.validator.addMethod("code",function(value,element){
        return this.optional(element)||value.match(msg);
    },"亲，请输入验证码");
    $.validator.addMethod("msg",function(value,element){
        var reg = /^[0-9]{6}$/;
        return this.optional(element)||value.match(reg);
    },"亲，请输入您的手机验证码");
    $.validator.addMethod("passwd",function(value,element){
        var reg = /^[a-zA-Z]/;
        return this.optional(element)||value.match(reg);
    },"亲，请输入您的密码");
}(jQuery))
$(function(){
    $("#form-reg").validate({
        errorElement:"b",
        errorPlacement:function(error,element){
            error.appendTo(element.parent()); 
            element.parent().css('height','64');
        },
        rules:{
            mobile:{
                required:true,
                phone:true
            },
            code:{
                required:true,
                code:true
            },
            message:{
                required:true,
                msg:true
            },
            password:{
                required:true,
                passwd:true,
                minlength:6
            },
            repassword:{
                required:true,
                equalTo:"input[name='password']"
            }
        },
        messages:{
            mobile:{
                required:"亲，请输入您的手机号",
                phone:"亲，请输入正确的手机号码"
            },
            code:{
                required:"亲，请输入验证码",
                code:"亲，请输入正确的验证码"
            },
            message:{
                required:"亲，验证码不能为空",
                msg:"亲，请输入正确的验证码"
            },
            password:{
                required:"亲，请输入您的密码",
                passwd:"亲，请输入正确的密码格式",
                minlength:"亲，密码至少六位"
            },
            repassword:{
                required:"亲，请再次输入您的密码",
                equalTo:"密码错误，请重新输入"
            }
        }
    })
})
//3.实现短信验证码倒计时
time = 60;
var codeMsg = document.getElementById("code-msg");
function timer(){
    if(time==0){
        codeMsg.onclick = timer;
        codeMsg.value = "获取验证码";
        codeMsg.disabled = false;
        time = 60;
    }else{
        codeMsg.onclick = "";
        codeMsg.value ="重新发送("+(time--)+")";
        codeMsg.style.backgroundColor = "#fff";
        codeMsg.disabled = true;
        setTimeout(function(){
            timer();
        },1000)
    }
}
// 4.实现点击获取验证码时候出现蒙版提示信息
var maskReg = document.getElementById("mask-reg");
var prompt = maskReg.children[0].children[0];
var submit = document.getElementById("submit");
var phone = document.getElementById("phone");
codeMsg.onclick = function(){
    maskReg.style.display = "block";
    prompt.innerText = "短信已发送到"+phone.value+"手机，短信有效时间为3分钟，请注意查收";
}
submit.onclick = function(){
    maskReg.style.display = "none";
    timer();   
}
